<template>
	<!-- 导航页面 -->
	<view class="container">
		<view class="nav-header">
			<!-- 搜索栏 -->
			<view class="nav-header-mt">
				<uni-easyinput class="nav-header-mt-uni" @change placeholderStyle="border-radius: 15px;" radius="95"
					suffixIcon="search" v-model="value" placeholder="请输入要搜索的内容" @iconClick="iconClick" />
				<view class="nav-header-mt-textBut" @click="ListMode">列表模式</view>
			</view>
		</view>
		<!-- 地图区域 -->
		<view class="map-container">
			<view class="map-placeholder">
				<!-- 地图 -->
				<view class="ditu">
					<map :latitude="latitude" :longitude="longitude" scale="14"></map>
				</view>
			</view>
		</view>

		<!-- 商家信息区域 -->
		<view class="info-container">
			<view class="info-img">
				<image src="/static/washProImg/ide.png"></image>
			</view>
			<view class="info-title">
				<view class="info-title">
					<view class="info-title-one">
						车百事汽车生活馆
					</view>
					<view class="info-title-to" @click="NavigateTheMap">
						详情》
					</view>
				</view>
				<view class="info-address">山西省太原市人民路与解放路交叉口</view>
			</view>

		</view>

		<!-- 导航按钮 -->
		<view class="button-container" @click="navigateToStore">
			<view class="navigate-button">立即导航</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//维度
				latitude: "",
				//经度
				longitude: ""
			}
		},
		methods: {
			// 导航地图
			NavigateTheMap(){
				uni.navigateTo({
					url:"/pages/RefuelNearby/StoreInformation/StoreInformation"
				})
			},
			// 传到加油主界面
			ListMode(){
				uni.navigateTo({
					url:"/pages/RefuelNearby/homepage/homepage"
				})
			},
			navigateToStore() {
				// 导航逻辑
				uni.navigateTo({
					url:"/pages/RefuelNearby/PreciseNavigation/PreciseNavigation"
				})
			},
			getMyPosition() {
				const that = this;
				uni.getLocation({
					success(resp) {
						console.log(resp);
						that.latitude = resp.latitude
						that.longitude = resp.longitude
					}
				})
			},
		},
		onReady() {
			this.getMyPosition()
		}
	}
</script>

<style>
	.nav-header {
		width: 100%;
		height: 100rpx;
		background-color: #ffffff;
		position: fixed;
		/* 固定定位 */
		top: 10;
		/* 在 nav 下面 */
		left: 0;
		/* 从左侧开始 */
		z-index: 10;
	}


	.nav-header-mt {
		width: 100%;
		margin: 0 auto;
		display: flex;
		white-space: nowrap;
		/* 不允许换行 */
		padding-top: 20rpx;
		clear: both;
	}

	.nav-header-mt-uni {
		margin: 0 10rpx 0 25rpx;
	}

	.nav-header-mt-textBut {
		background-color: #1E90FF;
		font-size: 15rpx;
		height: 50rpx;
		width: 100rpx;
		line-height: 50rpx;
		padding: 0 10rpx;
		margin: 10rpx 20rpx;
		border-radius: 10rpx;
	}

	.container {
		display: flex;
		flex-direction: column;
		height: 93vh;
		/* 使容器充满整个视口 */
	}

	.header {
		background-color: #3385FD;
		/* 顶部蓝色背景 */
		padding: 20rpx;
		/* 内边距 */
		text-align: center;
		/* 文本居中 */
	}

	.header-title {
		color: white;
		/* 文字颜色 */
		font-size: 20rpx;
		/* 字体大小 */
	}

	.map-container {
		flex: 1;
		/* 占据剩余空间 */
		position: relative;
		/* 相对定位 */
		background-color: #e0e0e0;
		/* 地图区域背景颜色 */
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
	}

	.map-placeholder {
		width: 700rpx;
		/* 占满宽度 */
		height: 600rpx;
	}

	.info-container {

		padding: 10rpx;
		/* 内边距 */
		background-color: white;
		/* 背景颜色 */
		border-top: 1rpx solid #e0e0e0;
		/* 上边框 */
		display: flex;


	}

	.info-img image {
		width: 220rpx;
		height: 130rpx;
	}

	.info-title {
		width: 100%;
		height: 50rpx;
		font-size: 16px;
		/* 商家名称字体大小 */
		font-weight: 900;
		/* 加粗 */
		display: flex;
		/* 使用flex布局 */
		justify-content: space-between;
		/* 子元素之间均匀分布 */
		flex-wrap: wrap;
		margin-left: 15rpx;
		
	}
	.info-title-to{
		color: #3385FD;
	}

	.info-address {
		width: 100%;
		font-size: 13px;
		/* 地址字体大小 */
		color: #666;
		/* 地址颜色 */
		margin: 35rpx 0 0 15rpx;
	}

	.info-distance {
		font-size: 12px;
		/* 距离字体大小 */
		color: #999;
		/* 距离颜色 */
	}

	.button-container {
		padding: 10rpx;
		background-color: #fff;
		/* 内边距 */
	}

	.navigate-button {
		width: 60%;
		margin: 0 auto;
		background-color: #3385FD;
		/* 按钮背景颜色 */
		color: white;
		/* 按钮文字颜色 */
		padding: 10rpx;
		/* 内边距 */
		text-align: center;
		/* 文本居中 */
		border-radius: 20rpx;
		/* 圆角 */
		cursor: pointer;
		/* 鼠标指针样式 */
		z-index: 10;
	}

	.ditu>map {
		width: 100%;
		height: 100%;
	}
</style>